<template>
  <div class="welcome-container">
    <div class="container">
      <div class="left">
        <el-card class="admin">
          <div class="avater">
            <img src="../assets/avatar.jpg" alt="" />
            <div>
              <p>admin</p>
              <p>超级管理员</p>
            </div>
          </div>
          <el-divider></el-divider>
          <div>
            <p>上次登录的时间: {{ prevTime | formatDate }}</p>
            <p>上次登录的地点: 西安</p>
          </div>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>活跃用户</span>
          </div>
          <div ref="myDiv" class="radar-echart" />
        </el-card>
      </div>
      <div class="right">
        <el-row :gutter="12">
          <el-col :span="8">
            <el-card class="box-card">
              <i
                class="el-icon-s-goods"
                style="color: rgb(69, 171, 255); font-size: 50px"
              ></i>
              <div class="box">
                <div class="title">商品总数量</div>
                <div class="count">100000+</div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="box-card">
              <i
                class="el-icon-s-custom"
                style="color: rgb(69, 171, 255); font-size: 50px"
              ></i>
              <div class="box">
                <div class="title">注册用户人数</div>
                <div class="count">100000+</div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="8">
            <el-card class="box-card">
              <i
                class="el-icon-present"
                style="color: rgb(69, 171, 255); font-size: 50px"
              ></i>
              <div class="box">
                <div class="title">VIP用户数量</div>
                <div class="count">88888+</div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-card class="todo">
          <el-calendar v-model="value"></el-calendar>
        </el-card>
      </div>
    </div>
    <!-- <div class="bootom">
      <div>
        <el-card id="main">

        </el-card>
      </div>
      <div>
        <el-card></el-card>
      </div>
    </div> -->
  </div>
</template>

<script>
// 完成加载过程
// var echarts = require('echarts')
var echarts = require('echarts/lib/echarts') // 引入echarts主模块
require('echarts/lib/chart/radar') // 引入雷达图
// 引入提示框和标题组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
  data() {
    return {
      value: new Date(),
      prevTime: localStorage.getItem('lastTime')
    }
  },
  // 页面渲染完毕事件
  mounted() {
    const myChart = echarts.init(this.$refs.myDiv) // 得到图表实例
    myChart.setOption({
      // title: {
      //   text: '基础雷达图'
      // },
      tooltip: {},
      legend: {
        data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
      },
      radar: {
        // shape: 'circle',
        name: {
          textStyle: {
            color: '#fff',
            backgroundColor: '#999',
            borderRadius: 3,
            padding: [3, 5]
          }
        },
        // 每个区域的最高值
        indicator: [
          { name: '工作效率', max: 100 },
          { name: '考勤', max: 100 },
          { name: '积极性', max: 100 },
          { name: '帮助同事', max: 100 },
          { name: '自主学习', max: 100 }
        ]
      },
      series: [
        {
          name: '预算 vs 开销（Budget vs spending）',
          type: 'radar',
          // areaStyle: {normal: {}},
          data: [
            {
              value: [10, 1, 100, 5, 100, 0],
              name: '张三'
            },
            {
              value: [50, 50, 50, 50, 50, 10],
              name: '李四'
            }
          ]
        }
      ]
    })
  }
}
</script>

<style lang="less" scoped>
.box {
  display: inline-block;
  padding-left: 30px;
}
.title {
  font-size: 20px;
  color: rgb(144, 147, 153);
}
.count {
  font-size: 16px;
}
.radar-echart {
  width: 300px;
  height: 300px;
}
.container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 700px;
  .left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 380px;
    .admin {
      display: flex;
      flex: 1;
      margin-bottom: 15px;
      img {
        width: 80px;
        height: 80px;
        margin-right: 40px;
        border-radius: 50%;
      }
      .avater {
        display: flex;
        margin-right: 40px;
        div {
          vertical-align: middle;
        }
      }
    }
    .box-card {
      flex: 1;
    }
  }
  .right {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    flex: 1;
    margin-left: 15px;
    .todo {
      margin-top: 15px;
      height: 100%;
    }
  }
}
.bootom {
  width: 100%;

  display: flex;

  margin-top: 15px;
  div {
    flex: 1;
    height: 200px;
  }
}
</style>
